<template>
  <div class="create_open_path_roam_box">
    <div class="inner_content_box">
      <div class="single_1_box_common">
        <div class="com_title_c"><img class="com_title_img" src="../../../assets/img/openlayer/1.png">展示</div>
        <div class="map_content_box" id="map_content_1"></div>
        <div class="coding_1_box_common coding_row_1">
          <div class="un_coding_c">功能实现：</div>
          <pre><code class="language-javascript"
                     v-text="content3"></code></pre>
        </div>
      </div>

    </div>

  </div>
</template>

<script lang="ts" setup>
import Prism from 'prismjs';
import {nextTick, onMounted, ref} from "vue";

import 'ol/ol.css'
import {Map, View} from 'ol'
import {register} from 'ol/proj/proj4'
import { fromLonLat } from 'ol/proj';
import {WebGLTile,Vector as VectorLayer} from 'ol/layer'
import {Style,Stroke} from 'ol/style'
import Feature from "ol/Feature";
import {ImageTile, XYZ,Vector as VectorSource} from 'ol/source'
import {LineString } from 'ol/geom'
import proj4 from 'proj4'

const content3=`
import {nextTick, onMounted, ref} from "vue";

import 'ol/ol.css'
import {Map, View} from 'ol'
import {register} from 'ol/proj/proj4'
import { fromLonLat } from 'ol/proj';
import {WebGLTile,Vector as VectorLayer} from 'ol/layer'
import {Style,Stroke} from 'ol/style'
import Feature from "ol/Feature";
import {ImageTile, XYZ,Vector as VectorSource} from 'ol/source'
import {LineString } from 'ol/geom'
import proj4 from 'proj4'

const createGridsLayer=(minLon:number,maxLon:number,minLat:number,maxLat:number,step:number,map:any)=>{
   let features=[];
  // 生成经度线
  for (let lon = minLon; lon <= maxLon; lon += step) {
    let coordinates = [];
    for (let lat = minLat; lat <= maxLat; lat += 0.1) {
      coordinates.push([lon, lat]);
    }
    features.push(new Feature({
      geometry: new LineString(coordinates)
    }));
  }

  // 生成纬度线
  for (let lat = minLat; lat <= maxLat; lat += step) {
    let coordinates = [];
    for (let lon = minLon; lon <= maxLon; lon += 0.1) {
      coordinates.push([lon, lat]);
    }
    features.push(new Feature({
      geometry: new LineString(coordinates)
    }));
  }

// 创建一个矢量图层来显示网格
  const gridLayer = new VectorLayer({
    source: new VectorSource({
      features: features
    }),
    style: new Style({
      stroke: new Stroke({
        color: 'rgba(255, 87, 51, 0.8)',
        width: 1
      })
    })
  });
  map.addLayer(gridLayer);
}
const createMap = () => {
  proj4.defs('EPSG:4490', 'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]')
  register(proj4)
  let layer = new WebGLTile({
    source: new ImageTile({
      attributions:
          'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
          'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
      url:
          'https://server.arcgisonline.com/ArcGIS/rest/services/' +
          'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
    }),
  })

  let map = new Map({
    target: 'map_content_1',
    layers: [layer],
    view: new View({
      center: [116.391478, 39.903185],
      projection: 'EPSG:4490',
      zoom: 5,
      maxZoom: 20,
      minZoom: 1
    }),
    overlays: [],
  })

  // 生成网格
  createGridsLayer(-180, 180, -90, 90, 10,map);

  map.on('click', function (e) {

  })
  map.on('singleclick', function (e) {

  })

}
    createMap();

`;

/**
 * 生成网格的feature
 * @param minlon 经度
 * @param maxlon
 * @param minlat 纬度
 * @param maxlat
 * @param step
 */
const createGridsLayer=(minLon:number,maxLon:number,minLat:number,maxLat:number,step:number,map:any)=>{
   let features=[];
  // 生成经度线
  for (let lon = minLon; lon <= maxLon; lon += step) {
    let coordinates = [];
    for (let lat = minLat; lat <= maxLat; lat += 0.1) {
      coordinates.push([lon, lat]);
    }
    features.push(new Feature({
      geometry: new LineString(coordinates)
    }));
  }

  // 生成纬度线
  for (let lat = minLat; lat <= maxLat; lat += step) {
    let coordinates = [];
    for (let lon = minLon; lon <= maxLon; lon += 0.1) {
      coordinates.push([lon, lat]);
    }
    features.push(new Feature({
      geometry: new LineString(coordinates)
    }));
  }

// 创建一个矢量图层来显示网格
  const gridLayer = new VectorLayer({
    source: new VectorSource({
      features: features
    }),
    style: new Style({
      stroke: new Stroke({
        color: 'rgba(255, 87, 51, 0.8)',
        width: 1
      })
    })
  });
  map.addLayer(gridLayer);
}

const createMap = () => {
  proj4.defs('EPSG:4490', 'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]')
  register(proj4)
  let layer = new WebGLTile({
    source: new ImageTile({
      attributions:
          'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
          'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
      url:
          'https://server.arcgisonline.com/ArcGIS/rest/services/' +
          'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
    }),
  })

  let map = new Map({
    target: 'map_content_1',
    layers: [layer],
    view: new View({
      center: [116.391478, 39.903185],
      projection: 'EPSG:4490',
      zoom: 5,
      maxZoom: 20,
      minZoom: 1
    }),
    overlays: [],
  })

  // 生成网格
  createGridsLayer(-180, 180, -90, 90, 10,map);

  map.on('click', function (e) {

  })
  map.on('singleclick', function (e) {

  })

}



onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
    createMap();
  })

})
</script>

<style lang="scss" scoped>
/* 引入Prism.js的CSS主题 */
@import 'prismjs/themes/prism-tomorrow.css';
@import '../css/openlayer_common.css';

.create_open_path_roam_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
  background-color: rgba(44, 62, 80, 0.5);

  .inner_content_box {
    width: calc(100% - 300px - 100px - 500px);
    height: calc(100% - 20px);
    margin-top: 10px;
    margin-right: 350px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.8);
  }

}
</style>

